// Libraries
import React, {FunctionComponent} from 'react'
import classnames from 'classnames'

interface Props {
  animate: boolean
}

const ExploreGraphic: FunctionComponent<Props> = ({animate}) => {
  const className = classnames('getting-started--image explore-graphic', {
    'getting-started--image__animating': animate,
  })
  return (
    <div className={className}>
      <svg
        version="1.1"
        x="0px"
        y="0px"
        width="322px"
        height="225px"
        viewBox="0 0 322 225"
      >
        <g>
          <path
            id="Background_2_"
            className="explore-graphic--bg"
            d="M302,34.3l-8.8-15.2c-2-3.4-6-5.7-9.9-5.7h-17.6c-4,0-7.9,2.3-9.9,5.7l-7.5,13h-12.4
		l-7.5-13c-2-3.4-6-5.7-9.9-5.7h-17.6c-4,0-7.9,2.3-9.9,5.7l-7.5,13h-15c-4,0-7.9,2.3-9.9,5.7l-7.5,13h-12.4l-7.5-13
		c-2-3.4-6-5.7-9.9-5.7h-15l-7.5-13c-2-3.4-6-5.7-9.9-5.7H71.2c-4,0-7.9,2.3-9.9,5.7l-7.5,13h-15c-4,0-7.9,2.3-9.9,5.7L20,53
		c-2,3.4-2,8,0,11.5l7.5,13l-7.5,13c-2,3.4-2,8,0,11.5l7.5,13l-7.5,13c-2,3.4-2,8,0,11.5l8.8,15.2c2,3.4,6,5.7,9.9,5.7h15l7.5,13
		c2,3.4,6,5.7,9.9,5.7h17.6c4,0,7.9-2.3,9.9-5.7l7.5-13h12.4l6.2,10.7l-7.5,13c-2,3.4-2,8,0,11.5l8.8,15.2c2,3.4,6,5.7,9.9,5.7h17.6
		c4,0,7.9-2.3,9.9-5.7l7.5-13h12.4l7.5,13c2,3.4,6,5.7,9.9,5.7h17.6c4,0,7.9-2.3,9.9-5.7l8.8-15.2c2-3.4,2-8,0-11.5l-7.5-13
		l6.2-10.7h15c4,0,7.9-2.3,9.9-5.7l8.8-15.2c2-3.4,2-8,0-11.5l-7.5-13l7.5-13c2-3.4,2-8,0-11.5l-7.5-13l6.2-10.7h15
		c4,0,7.9-2.3,9.9-5.7l8.8-15.2C303.9,42.4,303.9,37.7,302,34.3z"
          />
          <g id="Hexes">
            <path
              className="explore-graphic--hex"
              d="M200.8,59.3h17.6c0.9,0,2.1,0.7,2.6,1.5l8.8,15.2c0.5,0.8,0.5,2.2,0,3L221,94.2c-0.5,0.8-1.6,1.5-2.6,1.5
			h-17.6c-0.9,0-2.1-0.7-2.6-1.5L189.4,79c-0.5-0.8-0.5-2.2,0-3l8.8-15.2C198.7,59.9,199.9,59.3,200.8,59.3z"
            />
            <path
              className="explore-graphic--hex"
              d="M157,57.3l8.8-15.2c0.5-0.8,1.6-1.5,2.6-1.5H186c0.9,0,2.1,0.7,2.6,1.5l8.8,15.2c0.5,0.8,0.5,2.2,0,3
			l-8.8,15.2c-0.5,0.8-1.6,1.5-2.6,1.5h-17.6c-0.9,0-2.1-0.7-2.6-1.5L157,60.2C156.6,59.4,156.6,58.1,157,57.3z"
            />
            <path
              className="explore-graphic--hex"
              d="M103.6,40.5h17.6c0.9,0,2.1,0.7,2.6,1.5v0l8.8,15.2c0.5,0.8,0.5,2.2,0,3l-8.8,15.2c-0.5,0.8-1.6,1.5-2.6,1.5
			h-17.6c-0.9,0-2.1-0.7-2.6-1.5l-8.8-15.2c-0.5-0.8-0.5-2.2,0-3L101,42C101.5,41.2,102.7,40.5,103.6,40.5z"
            />
            <path
              className="explore-graphic--hex"
              d="M68.6,56.8l-8.8-15.2c-0.5-0.8-0.5-2.2,0-3l8.8-15.2c0.5-0.8,1.6-1.5,2.6-1.5h17.6c0.9,0,2.1,0.7,2.6,1.5
			l8.8,15.2c0.5,0.8,0.5,2.2,0,3l-8.8,15.2c-0.5,0.8-1.6,1.5-2.6,1.5H71.2C70.3,58.3,69.1,57.6,68.6,56.8z"
            />
            <path
              className="explore-graphic--hex"
              d="M67.7,97.7l-8.8,15.2c-0.5,0.8-1.6,1.5-2.6,1.5H38.8c-0.9,0-2.1-0.7-2.6-1.5l-8.8-15.2c-0.5-0.8-0.5-2.2,0-3
			l8.8-15.2c0.5-0.8,1.6-1.5,2.6-1.5h17.6c0.9,0,2.1,0.7,2.6,1.5l8.8,15.2C68.2,95.5,68.2,96.9,67.7,97.7z"
            />
            <path
              className="explore-graphic--hex"
              d="M88.8,95.7H71.2c-0.9,0-2.1-0.7-2.6-1.5L59.8,79c-0.5-0.8-0.5-2.2,0-3l8.8-15.2c0.5-0.8,1.6-1.5,2.6-1.5h17.6
			c0.9,0,2.1,0.7,2.6,1.5l8.8,15.2c0.5,0.8,0.5,2.2,0,3l-8.8,15.2C90.9,95,89.7,95.7,88.8,95.7z"
            />
            <path
              className="explore-graphic--hex"
              d="M132.6,97.7l-8.8,15.2c-0.5,0.8-1.6,1.5-2.6,1.5h-17.6c-0.9,0-2.1-0.7-2.6-1.5l-8.8-15.2
			c-0.5-0.8-0.5-2.2,0-3l8.8-15.2c0.5-0.8,1.6-1.5,2.6-1.5h17.6c0.9,0,2.1,0.7,2.6,1.5v0l8.8,15.2C133,95.5,133,96.9,132.6,97.7z"
            />
            <path
              className="explore-graphic--hex"
              d="M153.6,95.7H136c-0.9,0-2.1-0.7-2.6-1.5L124.6,79c-0.5-0.8-0.5-2.2,0-3l8.8-15.2c0.5-0.8,1.6-1.5,2.6-1.5
			h17.6c0.9,0,2.1,0.7,2.6,1.5L165,76c0.5,0.8,0.5,2.2,0,3l-8.8,15.2C155.7,95,154.5,95.7,153.6,95.7z"
            />
            <path
              className="explore-graphic--hex"
              d="M133.4,169l-8.8-15.2c-0.5-0.8-0.5-2.2,0-3l8.8-15.2c0.5-0.8,1.6-1.5,2.6-1.5h17.6c0.9,0,2.1,0.7,2.6,1.5
			l8.8,15.2c0.5,0.8,0.5,2.2,0,3l-8.8,15.2c-0.5,0.8-1.6,1.5-2.6,1.5H136C135.1,170.5,133.9,169.8,133.4,169z"
            />
            <path
              className="explore-graphic--hex"
              d="M165,191.2l-8.8,15.2c-0.5,0.8-1.6,1.5-2.6,1.5H136c-0.9,0-2.1-0.7-2.6-1.5l-8.8-15.2c-0.5-0.8-0.5-2.2,0-3
			l8.8-15.2c0.5-0.8,1.6-1.5,2.6-1.5h17.6c0.9,0,2.1,0.7,2.6,1.5l8.8,15.2C165.4,189.1,165.4,190.4,165,191.2z"
            />
            <path
              className="explore-graphic--hex"
              d="M200.8,171.5h17.6c0.9,0,2.1,0.7,2.6,1.5l8.8,15.2c0.5,0.8,0.5,2.2,0,3l-8.8,15.2c-0.5,0.8-1.6,1.5-2.6,1.5
			h-17.6c-0.9,0-2.1-0.7-2.6-1.5l-8.8-15.2c-0.5-0.8-0.5-2.2,0-3l8.8-15.2C198.7,172.2,199.9,171.5,200.8,171.5z"
            />
            <path
              className="explore-graphic--hex"
              d="M188.6,154.3l8.8,15.2c0.5,0.8,0.5,2.2,0,3l-8.8,15.2c-0.5,0.8-1.6,1.5-2.6,1.5h-17.6c-0.9,0-2.1-0.7-2.6-1.5
			l-8.8-15.2c-0.5-0.8-0.5-2.2,0-3l8.8-15.2c0.5-0.8,1.6-1.5,2.6-1.5H186C186.9,152.8,188.1,153.5,188.6,154.3z"
            />
            <path
              className="explore-graphic--hex"
              d="M197.4,135.1l-8.8,15.2c-0.5,0.8-1.6,1.5-2.6,1.5h-17.6c-0.9,0-2.1-0.7-2.6-1.5l-8.8-15.2
			c-0.5-0.8-0.5-2.2,0-3l8.8-15.2c0.5-0.8,1.6-1.5,2.6-1.5H186c0.9,0,2.1,0.7,2.6,1.5l8.8,15.2C197.8,132.9,197.8,134.3,197.4,135.1
			z"
            />
            <path
              className="explore-graphic--hex"
              d="M229.8,116.4l-8.8,15.2c-0.5,0.8-1.6,1.5-2.6,1.5h-17.6c-0.9,0-2.1-0.7-2.6-1.5l-8.8-15.2
			c-0.5-0.8-0.5-2.2,0-3l8.8-15.2c0.5-0.8,1.6-1.5,2.6-1.5h17.6c0.9,0,2.1,0.7,2.6,1.5l8.8,15.2
			C230.2,114.2,230.2,115.6,229.8,116.4z"
            />
            <path
              className="explore-graphic--hex"
              d="M253.4,79.5l8.8,15.2c0.5,0.8,0.5,2.2,0,3l-8.8,15.2c-0.5,0.8-1.6,1.5-2.6,1.5h-17.6c-0.9,0-2.1-0.7-2.6-1.5
			l-8.8-15.2c-0.5-0.8-0.5-2.2,0-3l8.8-15.2c0.5-0.8,1.6-1.5,2.6-1.5h17.6C251.7,78,252.9,78.6,253.4,79.5z"
            />
            <path
              className="explore-graphic--hex"
              d="M262.2,60.2l-8.8,15.2c-0.5,0.8-1.6,1.5-2.6,1.5h-17.6c-0.9,0-2.1-0.7-2.6-1.5l-8.8-15.2
			c-0.5-0.8-0.5-2.2,0-3l8.8-15.2c0.5-0.8,1.6-1.5,2.6-1.5h17.6c0.9,0,2.1,0.7,2.6,1.5l8.8,15.2C262.7,58.1,262.7,59.4,262.2,60.2z"
            />
            <path
              className="explore-graphic--hex"
              d="M294.6,41.5l-8.8,15.2c-0.5,0.8-1.6,1.5-2.6,1.5h-17.6c-0.9,0-2.1-0.7-2.6-1.5l-8.8-15.2
			c-0.5-0.8-0.5-2.2,0-3l8.8-15.2c0.5-0.8,1.6-1.5,2.6-1.5h17.6c0.9,0,2.1,0.7,2.6,1.5l8.8,15.2C295.1,39.4,295.1,40.7,294.6,41.5z"
            />
          </g>
          <path
            id="DiagnosticB"
            className="explore-graphic--diagnostic diagnostic-b"
            d="M178.4,10.4c0-1-0.8-1.9-1.9-1.9s-1.9,0.8-1.9,1.9c0,0.9,0.6,1.6,1.4,1.8v73.6
		c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V12.2C177.8,12,178.4,11.3,178.4,10.4z"
          />
          <path
            id="DiagnosticA"
            className="explore-graphic--diagnostic diagnostic-a"
            d="M48.1,206.3v-59.9c0-0.3-0.2-0.5-0.5-0.5s-0.5,0.2-0.5,0.5v59.9c-0.8,0.2-1.4,0.9-1.4,1.8
		c0,1,0.8,1.9,1.9,1.9s1.9-0.8,1.9-1.9C49.5,207.2,48.9,206.5,48.1,206.3z"
          />
          <g className="explore-graphic--flows">
            <path
              id="FlowB"
              className="explore-graphic--flow flow-b"
              d="M47.6,134.9l30,16.5c1,0.5,2.2,0.5,3.2,0l30-16.9c1-0.6,2.2-0.6,3.2,0l29.1,16.8
		c1,0.6,2.3,0.6,3.3,0l29.1-16.8c1-0.6,1.6-1.7,1.6-2.8V95.2"
            />
            <path
              id="FlowA"
              className="explore-graphic--flow flow-a"
              d="M47.6,134.9l30.1-19c0.9-0.6,1.5-1.6,1.5-2.8V79.4c0-1.2,0.6-2.3,1.7-2.9l29.9-16.9
		c1-0.6,2.2-0.6,3.2,0l30.9,17.8l32.3,17.8"
            />
          </g>
          <g id="Text">
            <line
              className="explore-graphic--text"
              x1="52.6"
              y1="203.1"
              x2="75.2"
              y2="203.1"
            />
            <line
              className="explore-graphic--text"
              x1="52.6"
              y1="199.1"
              x2="79.2"
              y2="199.1"
            />
            <line
              className="explore-graphic--text"
              x1="52.6"
              y1="195.1"
              x2="83.5"
              y2="195.1"
            />
            <line
              className="explore-graphic--text"
              x1="52.6"
              y1="191.1"
              x2="69.4"
              y2="191.1"
            />
            <line
              className="explore-graphic--text"
              x1="171.5"
              y1="15.4"
              x2="148.9"
              y2="15.4"
            />
            <line
              className="explore-graphic--text"
              x1="171.5"
              y1="19.4"
              x2="155.3"
              y2="19.4"
            />
            <line
              className="explore-graphic--text"
              x1="171.5"
              y1="23.4"
              x2="146.3"
              y2="23.4"
            />
            <line
              className="explore-graphic--text"
              x1="171.5"
              y1="27.4"
              x2="159.3"
              y2="27.4"
            />
            <line
              className="explore-graphic--text"
              x1="155.3"
              y1="27.4"
              x2="149.2"
              y2="27.4"
            />
          </g>
          <path
            id="HighlightA"
            className="explore-graphic--hex hex-a"
            d="M58.9,116.9l8.8,15.2c0.5,0.8,0.5,2.2,0,3l-8.8,15.2c-0.5,0.8-1.6,1.5-2.6,1.5H38.8
		c-0.9,0-2.1-0.7-2.6-1.5l-8.8-15.2c-0.5-0.8-0.5-2.2,0-3l8.8-15.2c0.5-0.8,1.6-1.5,2.6-1.5h17.6C57.3,115.4,58.5,116.1,58.9,116.9z
		"
          />
          <path
            id="HighlightB"
            className="explore-graphic--hex hex-b"
            d="M165.8,112.9L157,97.7c-0.5-0.8-0.5-2.2,0-3l8.8-15.2c0.5-0.8,1.6-1.5,2.6-1.5H186
		c0.9,0,2.1,0.7,2.6,1.5l8.8,15.2c0.5,0.8,0.5,2.2,0,3l-8.8,15.2c-0.5,0.8-1.6,1.5-2.6,1.5h-17.6
		C167.5,114.4,166.3,113.7,165.8,112.9z"
          />
        </g>
      </svg>
    </div>
  )
}

export default ExploreGraphic
